<script setup>
import { ref, computed,onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import requestUtil,{getServerUrl} from "@/utils/request.js";
import Cookies from "js-cookie";
let router = useRouter();
let checked = ref([]);
let list = ref([]);
let goodList = ref([]);


const loadShorCar = async () => {
  let res = await requestUtil.get("/app/shopCar/", {
    userId: Cookies.get("userId")
  });
  goodList.value = res.data.data;
};
onBeforeMount(()=>{
  loadShorCar();
  getImage()
})
const getImage = () => {
  return getServerUrl()+'media/dishes/';
}
const jump = () => {
  if (list.value.length === 0) {
    ElMessage.warning("请勾选要结算的商品");
    return;
  } else {
    window.sessionStorage.setItem("totalPrice",Number(totalPrice.value));
    window.sessionStorage.setItem("list",JSON.stringify(list.value));
    router.push({
      path: "/address",
    });
  }
};
const totalPrice = computed(() => {
  if (!goodList.value || goodList.value.length === 0) {
    return 0; // 如果购物车为空，返回0
  }
  console.log(checked.value);
  
  list.value = goodList.value.filter(item =>
    checked.value.includes(item.dishes_id)
  );
  // 筛选被勾选的商品
  return list.value.reduce((sum, cur) => sum + cur.goods_num * cur.price, 0);
});
const del = async (dishes_id, goods_num) => {
  let res = await requestUtil.del(
    `/app/deleteShopCar/?userId=${Cookies.get("userId")}&dishes_id=${dishes_id}&goods_num=${goods_num}`
  );
  if (res.data.code === 200) {
    await loadShorCar();
    ElMessage.success('删除成功')
  } else {
    ElMessage.error('删除失败')
  }
};
</script>

<template>
  <div class="shop-car">
    <div class="radio" v-for="(item, index) in goodList" :key="item.dishes_id">
      <div class="radio-box">
        <van-checkbox-group v-model="checked">
          <van-checkbox :name="item.dishes_id" checked-color="red"></van-checkbox>
        </van-checkbox-group>
        <div class="img">
          <img :src="getImage()+item.img" />
        </div>
        <div class="content">
          <div class="title">{{ item.name }}</div>
          <!-- <div class="specs">规格:&nbsp;&nbsp;{{ item.specs }}</div> -->
          <div class="num">x{{ item.goods_num }}</div>
        </div>
        <div class="price">￥{{ item.price }}</div>
        <div class="del">
          <button @click="del(item.dishes_id,item.goods_num)">删除</button>
        </div>
      </div>
    </div>
  </div>
  <div class="totalprice" v-if="goodList.length!== 0">
    <div class="total">合计:￥{{ totalPrice }}</div>
    <button @click="jump" class="btn">去结算</button>
  </div>
  <div v-else>
    <div class="empty">购物车空空如也</div>
  </div>
</template>

<style scoped>
.shop-car {
  padding-left: 30px;
}

.radio {
  margin-top: 50px;
}

.totalprice {
  margin-top: 40px;
  display: flex;
  justify-content: right;
  align-items: center;
}

.radio-box {
  display: flex;
  justify-content: left;
  align-items: center;
}

.radio-box img {
  margin: 0 30px;
  width: 150px;
}

.radio-box .content {
  width: 35%;
  color: #333333;
}

.radio-box .price {
  display: flex;
  justify-content: center;
  align-items: center;
  color: red;
  width: 20%;
  text-align: right;
}

.radio-box .del {
  position: relative;
  width: 17%;
}
.radio-box .del button{
  background-color: #ff0000;
  color:white;
  border-radius: 15px;
  padding: 5px;
  border:none;
}

.radio-box .content .specs {
  font-size: 24px;
  color: #666666;
}

.radio-box .content .num {
  font-size: 30px;
  color: #666666;
}

.totalprice .btn {
  background: linear-gradient(90deg, #001aff, #76ff9f); /* 渐变背景 */
  border: none;
  width: 300px;
  padding: 30px;
  margin: 0 30px;
  color: #ff0000;
  font-weight: bold;
  border-radius: 40px;
}

.totalprice .total {
  color: red;
  font-size: 40px;
}

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color: red;
}
</style>